<template>
	<up-popup :show="show" :round="15" mode="bottom">
		<view class="privacy-container">
			<view class="fs-36 bold t-c">
				{{appStore.applyName}}隐私政策
			</view>
			<view class="mt-40 txt-line-height">
				点击“同意并继续”则视为您已经充分、完全地阅读并理解了
				<span @click="$u.route('/pages/login/agreement')" class="color">《用户协议》</span>
				和
				<span @click="$u.route('/pages/login/privacy')" class="color">《隐私政策》</span>
				中的全部内容，并且同意我们按照本政策的约定收集、使用、存储及对外提供您的个人信息。
			</view>
			
			<view class="mt-40 txt-line-height">
				如果您点击“不同意并退出”，我们将无法为您提供完整的产品和服务，同时您也需要立即停止使用早知道产品及相关服务，并且退出本小程序。
			</view>
			
			<view class="fr-ac-jsb my-80">
				<view @click="noAgree" class="privacy-btn">
					不同意并退出
				</view>
				<view @click="agree" class="privacy-btn full">
					同意并继续
				</view>
			</view>
			
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick,
		watch
	} from 'vue'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useUserStore
	} from '@/store/user'
	const appStore = useAppStore()
	const userStore = useUserStore()
	const show = ref(false)
	onMounted(()=>{
		setTimeout(()=>{
			let pages = getCurrentPages() // 获取栈实例
			let fullPath = pages[pages.length - 1].$page.fullPath
			if(fullPath.includes('/pages/login')){
				return
			}
			if(appStore.showPrivacy){
				show.value = true
			}
		},14)
		
	})
	
	const agree = ()=>{
		appStore.showPrivacy = false
		show.value = false
	}
	const noAgree = ()=>{
		uni.exitMiniProgram({
			success: function() {
				console.log('退出小程序成功');
			},
			fail: function(err) {
				console.log('退出小程序失败', err);
			}
		})
	}
</script>

<style lang="scss">
	.color{
		color: var(--color);
	}
	.txt-line-height{
		line-height: 1.6;
	}
	.privacy-container{
		position: relative;
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		border-radius: 30rpx;
		padding: 40rpx 60rpx;
	}
	
	.privacy-btn{
		width: 45%;
		background-color: #fff;
		color: var(--color);
		border-radius: 100rpx;
		padding: 24rpx 0;
		font-size: 30rpx;
		text-align: center;
		letter-spacing: 4rpx;
		border: 1px solid var(--color);
		
		&.full{
			background-color: var(--color);
			color: #fff;
		}
	}
	
	.close-icon{
		position: absolute;
		bottom: -180rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
	}
</style>